<template>
  <div class="main-box">
    <div class="head-box">
      <PageHeader :parActiveName="activeName" />
    </div>
    <div class="search-and-add-box">
      <div class="search-box">
        <Search ref="proSearchRef" :type="type" :getAllProjectData="getAllProjectData" />
      </div>
      <div class="file-upload-box">
            <div @click="openAddItem"><i class="el-icon-plus"></i></div>
        </div>
    </div>
    
    <div class="test-step-box" v-if="false">
      <div
        class="test-step-item"
        v-for="(item, index) in stageOptions"
        :key="index"
        @click="selectItem(index)"
      >
        {{ item.stageName }}
      </div>
    </div>
    <div class="step-box" v-if="false">
      <div class="step-item" v-for="(item, index) in stageOptions" :key="index">
        <div @click="selectItem(index)">
          <i
            :class="
              active === index
                ? 'iconfont icon-yuanquanxuanzhong'
                : 'iconfont icon-yuanquan'
            "
          ></i>
        </div>
        <div class="step-title" @click="selectItem(index)">
          {{ item.stageName }}
        </div>
        <div class="icon" v-if="index != 6">
          <i class="iconfont icon-jiantou_yemian_xiangyou"></i>
        </div>
        <div class="icon" v-else>
          <i class="iconfont icon-24gf-ellipsis" @click="getAllProjectData"></i>
        </div>
      </div>
    </div>
    <div class="table-box">
      <Table
        :tableData="showProData"
        :openInfoDrawer="openInfoDrawer"
        :activeName="activeName"
        :openCost="openCost"
        :openUpdate="openUpdate"
        :openAnnexAndMilestoner="openAnnexAndMilestoner"
        :openAnnex="openAnnex"
        :openMilestoner="openMilestoner"
        :openCollection="openCollection"
      />
    </div>
    <div class="pagination-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    <div class="drawer-box">
      <Drawer ref="infoDrawerRef" :drawer="drawer" :projectRow="projectRow" />
    </div>
    <div>
      <AddItemDrawer ref="addItemRef" :drawer="drawer" :projectRow="projectRow" :stageOptions="stageOptions" :unitOptions="unitOptions" :organOptions="organOptions" :getAllProjectData="getAllProjectData" />
    </div>
    <div class="drawer-box">
      <CostDrawer
        ref="costDrawerRef"
        :drawer="drawer"
        :projectRow="projectRow"
      />
    </div>
    <div class="drawer-box">
      <UpdateDrawer
        ref="updataDrawerRef"
        :drawer="drawer"
        :projectRow="projectRow"
        :getAllProjectData="getAllProjectData"
      />
    </div>
    <div class="drawer-box">
      <MilAndAnnexDrawer
        ref="annexAndMilestoneRef"
        :drawer="drawer"
        :projectRow="projectRow"
      />
    </div>
    <div class="drawer-box">
      <AnnexDrawer ref="annexRef" :drawer="drawer" :projectRow="projectRow" />
    </div>
    <div class="drawer-box">
      <MilestonesDrawer
        ref="milestoneRef"
        :drawer="drawer"
        :projectRow="projectRow"
      />
    </div>
    <div class="drawer-box">
      <CollectionDrawer
        ref="collectionDrawerRef"
        :drawer="drawer"
        :projectRow="projectRow"
      />
    </div>
  </div>
</template>

<script>
import PageHeader from '@/components/PageHeader.vue'
import Search from '@/components/Search.vue'
import Table from './ui/Table.vue'
import Drawer from './ui/Drawer.vue'
import CostDrawer from './ui/CostDrawer.vue'
import UpdateDrawer from './ui/UpdateDrawer.vue'
import MilAndAnnexDrawer from './ui/MilAndAnnexDrawer.vue'
import AnnexDrawer from './ui/AnnexDrawer.vue'
import MilestonesDrawer from './ui/MilestonesDrawer.vue'
import CollectionDrawer from './ui/CollectionDrawer.vue'
import AddItemDrawer from './ui/AddItemDrawer.vue'

import { getStageProjectListApi, getDictionaryListApi } from '@/api/index'
export default {
  data () {
    return {
      // 项目列表
      type: 'project',
      // 状态数组
      stageOptions: [
        {
          proStage: 'SalesResearch',
          stageName: '售前调研'
        },
        {
          proStage: 'Develop',
          stageName: '研发阶段'
        },
        {
          proStage: 'ElectricImplement',
          stageName: '电气实施'
        },
        {
          proStage: 'Design',
          stageName: '产品设计'
        },
        {
          proStage: 'DebugTogether',
          stageName: '联调阶段'
        },
        {
          proStage: 'Waiting4Sign',
          stageName: '等待验收'
        },
        {
          proStage: 'Finish',
          stageName: '已完成'
        }
      ],
      // 展示的项目源数据
      showProData: [],
      // 抽屉是否弹出
      drawer: false,
      // 当前点击的项目
      projectRow: null,
      // 控制状态点高亮
      activeName: 'first',
      tableActive: 1,
      keyWord: '',
      startTime: '',
      endTime: '',
      options: [
        {
          value: '选项1',
          label: '正常'
        },
        {
          value: '选项2',
          label: '请假'
        },
        {
          value: '选项3',
          label: '旷工'
        },
        {
          value: '选项4',
          label: '出差'
        }
      ],
      value: '',
      options2: [
        {
          value: '选项1',
          label: '已同意'
        },
        {
          value: '选项2',
          label: '已驳回'
        },
        {
          value: '选项3',
          label: '审批中'
        }
      ],
      value2: '',
      // 单位数据源
      unitOptions: [],
      // 发证机关
      organOptions: [],
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 100
    }
  },
  watch: {
    showProData (nv, ov) {
      this.showProData.forEach((item, index) => {
        this.showProData[index].procity = item.proprovince + '-' + item.procity
        let itemStage = this.stageOptions.find(stageItem => {
          return item.prostage === stageItem.dickey
        })
        this.showProData[index].stageName = itemStage.dicvalue
      })
    }
  },
  components: {
    PageHeader,
    Search,
    AddItemDrawer,
    Table,
    Drawer,
    CostDrawer,
    UpdateDrawer,
    MilAndAnnexDrawer,
    AnnexDrawer,
    MilestonesDrawer,
    CollectionDrawer
  },

  mounted () {
    this.getFileTypeOptions()
    this.getAllProjectData()
  },

  methods: {

    // 获取类型列表
    async getFileTypeOptions () {
      let data = {
        skipcount: 0,
        maxresultcount: 100000
      }
      let res = await getDictionaryListApi(data)
      this.stageOptions = []
      console.log('下拉框数据源-------->', this.stageOptions)
      res.dicdatas.forEach(item => {
        switch (item.typename) {
        case 'Stage':
          this.stageOptions.push(item)
          break
        case 'Unit':
          this.unitOptions.push(item)
          break
        case 'Issuing':
          this.organOptions.push(item)
          break
        }
      })     
    },
    // 搜索赋值
    setShowProData (data) {
      this.showProData = data
    },
    // 获取全部项目数据
    async getAllProjectData (stage) {
      this.active = null
      let params = {
        prostage: stage,
        skipcount: (this.currentPage - 1) * this.pageSize,
        maxresultcount: this.pageSize
      }
      let res = await getStageProjectListApi(params)
      this.total = res.total
      this.showProData = res.projects
    },
    // 阶段选择事件
    async selectItem (id) {
      this.active = id
      let data = {
        prostage: this.stageOptions[id].proStage,
        skipcount: (this.currentPage - 1) * this.pageSize,
        maxresultcount: this.pageSize
      }
      let res = await getStageProjectListApi(data)
      this.total = res.total
      this.showProData = res.projects
    },

    // 打开新增抽屉
    openAddItem (row) {
      this.projectRow = { ...row }
      this.$refs.addItemRef.openDrawer(row)
    },

    // 打开基本信息查看抽屉
    openInfoDrawer (row) {
      this.projectRow = { ...row }
      this.$refs.infoDrawerRef.openDrawer(row)
    },

    // 打开费用信息抽屉
    openCost (row) {
      this.projectRow = { ...row }
      this.$refs.costDrawerRef.openDrawer(row)
    },

    // 打开编辑基本信息抽屉
    openUpdate (row) {
      this.projectRow = { ...row }
      this.$refs.updataDrawerRef.openDrawer(row)
    },

    // 打开回款信息
    openCollection (row) {
      console.log('openCollection------>', row)
      this.projectRow = { ...row }
      this.$refs.collectionDrawerRef.openDrawer(row)
    },

    // 打开附件与里程碑抽屉
    openAnnexAndMilestoner (row) {
      this.projectRow = { ...row }
      this.$refs.annexAndMilestoneRef.openDrawer(row)
    },

    // 打开附件抽屉
    openAnnex (row) {
      this.projectRow = { ...row }
      this.$refs.annexRef.openDrawer(row)
    },

    // 打开里程碑抽屉
    openMilestoner (row) {
      this.projectRow = { ...row }
      this.$refs.milestoneRef.openDrawer(row)
    },

    buttonClick (num) {
      console.log(num)
      this.tableActive = num
    },

    // 修改每页大小
    async handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      let params = {
        prostage: this.stageOptions[this.active] ? this.stageOptions[this.active].proStage : null,
        skipcount: (this.currentPage - 1) * this.pageSize,
        maxresultcount: this.pageSize
      }
      let res = await getStageProjectListApi(params)
      this.total = res.total
      this.showProData = res.projects
    },
    // 切换页码
    async handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      let params = {
        prostage: this.stageOptions[this.active] ? this.stageOptions[this.active].proStage : null,
        skipcount: (this.currentPage - 1) * this.pageSize,
        maxresultcount: this.pageSize
      }
      let res = await getStageProjectListApi(params)
      this.total = res.total
      this.showProData = res.projects
    }
  }
}
</script>

<style lang="scss" scoped>
.main-box {
  height: 100vh;

  /* background: #f3f6ff; */
  .search-and-add-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 80%;
  margin-left: 10%;

  /* border: 1px solid red; */
  .search-box {
  /* border: 1px solid red; */
  width: 25%;
  margin-top: 20px;
}
.file-upload-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 40px;
  margin-top: 10px;

  /* border: 1px solid red; */
  >div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 80%;
  color: #FFF;
  font-size: 16px;
  background: #85ce61;
  border-radius: 5px;
  &:hover {
    cursor: pointer;
  }
  &:active {
    background: rgba($color: #85ce61, $alpha: 50%);
  }
  }
}
}
  .search-box {
  /* border: 1px solid red; */
  width: 25%;
  margin-top: 20px;
}
.table-box {
  /* border: 1px solid blue; */
  width: 80%;
  height: 75%;
  margin-top: 10px;
  margin-left: 10%;

  /* overflow: auto; */
}
.pagination-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 80%;
  height: 30px;
  margin-top: 10px;
  margin-left: 10%;

  /* background: #000; */
}
}
.step-box {
  /* border: 1px solid red; */
  display: flex;

  /* height: 50px; */
  width: 90%;
  margin-top: 10px;
  margin-left: 10%;
  .step-item {
    display: flex;
    width: 160px;
    height: 35px;
    line-height: 200%;

    /* background: #f3f6ff; */
    .step-title {
      width: 70px;
      margin-right: 20px;
      color: black;
    }
    .icon {
      width: 30px;
    }
  }
  .step-item:hover {
    cursor: pointer;
  }
}
.head-step {
  /* border: 1px solid red; */
  display: flex;
  width: 600px;
  height: 40px;
  margin: 10px;
  margin-left: 150px;
  > div {
    width: 150px;
    height: 40px;
    margin-right: 10px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #aeb0b6;
  }
  > div:hover {
    background: rgba($color: #aeb0b6, $alpha: 50%);
    cursor: pointer;
  }
}
.screen-box {
  /* border: 1px solid red; */
  width: 80%;
  margin-left: 150px;
  > input {
    height: 25px;
    margin-top: 5px;
    margin-right: 5px;
    border: 1px solid #e4e6ec;
  }
}
.el-date-editor {
  margin-right: 5px;
}
.el-tabs__nav-scroll {
  /* border: 1px solid red; */
  width: 600px;
  margin-left: 150px;
}

@media screen and (width <= 768px) {
  .main-box {
    /* background: #f3f6ff; */
  }
  .page-btn {
    display: flex;
    width: 100%;

    /* border: 1px solid blue; */
    height: 40px;
    margin-top: 10px;
    margin-left: 12px;
    line-height: 40px;
    > div {
      width: 20%;
      height: 20px;
      margin: 0 5px;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      border: 1px solid #dad2d2;
    }
    > div:hover {
      cursor: pointer;
    }
  }
  .search-box {
    /* border: 1px solid red; */
    width: 200px;
    margin-top: 20px;
    margin-left: 10%;
  }
  .test-step-box {
    display: flex;

    /* border: 1px solid red; */
    width: 100%;
    margin-top: 10px;
    margin-left: 5px;
    .test-step-item {
      width: 14%;

      /* border: 1px solid red; */
      height: 20px;
      color: #fff;
      font-size: 10px;
      line-height: 20px;
      text-align: center;
      background-image: url("../../assets/back-img3.png");
      background-size: 100% 100%;
    }
  }
  .table-box {
    /* border: 1px solid blue; */
    width: 99%;
    height: 500px;
    margin-top: 10px;
    margin-left: 2px;

    /* overflow: auto; */
  }
  .step-box {
    /* border: 1px solid red; */
    display: flex;

    /* height: 50px; */
    width: 90%;
    margin-top: 10px;
    margin-left: 10%;
    .step-item {
      display: flex;
      width: 160px;
      height: 35px;
      line-height: 200%;

      /* background: #f3f6ff; */
      .step-title {
        width: 70px;
        margin-right: 20px;
        color: black;
      }
      .icon {
        width: 30px;
      }
    }
    .step-item:hover {
      cursor: pointer;
    }
  }
  .head-step {
    /* border: 1px solid red; */
    display: flex;
    width: 600px;
    height: 40px;
    margin: 10px;
    margin-left: 150px;
    > div {
      width: 150px;
      height: 40px;
      margin-right: 10px;
      line-height: 40px;
      text-align: center;
      border: 1px solid #aeb0b6;
    }
    > div:hover {
      background: rgba($color: #aeb0b6, $alpha: 50%);
      cursor: pointer;
    }
  }
  .screen-box {
    /* border: 1px solid red; */
    width: 80%;
    margin-left: 150px;
    > input {
      height: 25px;
      margin-top: 5px;
      margin-right: 5px;
      border: 1px solid #e4e6ec;
    }
  }
  .el-date-editor {
    margin-right: 5px;
  }
  .el-tabs__nav-scroll {
    /* border: 1px solid red; */
    width: 600px;
    margin-left: 150px;
  }
}
</style>